import React, { useState } from 'react';
import img1 from '../../../assets/img/1.jpg';
import img2 from '../../../assets/img/5.png';
import '../css/login_index.less';
import LoginView from './loginView';
import RegisterView from './register';
//二维码页面
import Qrcode from './Qrcode';
//人脸识别
import Face from './Face';
//忘记密码
import Wang from './Wang';

import 'animate.css';
const Index: React.FC = () => {
    const [show, setShow] = useState<number>(0)

    const changeShow = (index: number) => {
        setShow(index);
        console.log(index);
    }

    return (
        <div
            style={{
                backgroundImage: `url(${img1})`,
                backgroundSize: 'cover',
                backgroundRepeat: 'no-repeat',
                backgroundPosition: 'center',
                height: '100vh',
                position: 'relative',
            }}
        >
            <div className='login_box'>
                <div className='login_box_left'>
                    <div className='login_box_left_title'>
                        齐溪水库灌区运行管理平台
                    </div>
                    <div className='login_box_left_form'>
                        <img className='login_box_left_form_img' src={img2} alt="" />
                    </div>
                </div>
                {
                    show == 0 && <LoginView className="animate__animated animate__zoomIn" changeShow={changeShow}></LoginView>
                }
                {
                    show == 1 && <RegisterView changeShow={changeShow}></RegisterView>
                }
                {
                    show == 2 && <Qrcode changeShow={changeShow}></Qrcode>
                }
                {
                    show == 3 && <Face changeShow={changeShow} ></Face>
                }
                {
                    show == 4 && <Wang changeShow={changeShow} ></Wang>
                }
            </div>
        </div>
    );
};

export default Index;